<!-- 节点配置弹窗 -->
<template>
    <div class="node-config-dialog">
        <el-dialog title="节点配置" :visible.sync="dialogVisible" width="85vw" :before-close="handleClose"
            :close-on-click-modal="false" :destroy-on-close="true">
            <div class="node-config flex flex-row">
                <div class="node-config-left-tree flex flex-col">
                    <div class="node-config-tree-title flex justify-center items-center" style="height: 32px">
                        节点列表
                    </div>
                    <div class="node-config-tree-box flex" style="height: calc(100% - 32px)">
                        <Tree ref="nodeConfigTreeRef" :isGeneralFolderAndFile="true" :treeData="treeData"
                            @nodeClick="nodeClick" :defaultExpandAll="true" :fileMenu="right_menuList.rightMenuList_5"
                            @handleMenuClick="handleMenuClick" @moveNodeOrder="moveNodeOrder">
                        </Tree>
                    </div>
                </div>
                <div class="node-config-right-box flex flex-col">
                    <div class="node-config-right-box__title">
                        实体列表
                    </div>
                    <div class="node-config-right-box__member">
                        {{ tableData.length }} 实体
                    </div>
                    <div class="node-config-right-box__split"></div>
                    <div class="node-config-right-box__query_add">
                        <div class="node-config-right-box__query">
                            <el-input prefix-icon="el-icon-search" v-model="searchText" class="jtyj-input"
                                clearable></el-input>
                        </div>
                        <div class="node-config-right-box__add">
                            <el-button class="jtyj-btn-cancel" @click="handleDelete">删除</el-button>
                            <el-button type="primary" @click="handleAdd">新增</el-button>
                        </div>
                    </div>
                    <div class="node-config-right-box__table">
                        <el-table ref="multipleTable" :data="filteredTableData" tooltip-effect="dark"
                            style="width: 100%" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column label="日期">
                                <template slot-scope="scope">{{ scope.row.date }}</template>
                            </el-table-column>
                            <el-table-column prop="name" label="姓名">
                            </el-table-column>
                            <el-table-column prop="address" label="地址" show-overflow-tooltip>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <AddDialog ref="addDialogRef" :scenarioId="scenarioId"></AddDialog>
            <AddOrUpdateFile ref="addOrUpdateFileRef" :scenarioId="scenarioId" @refresh="getNodeTree"></AddOrUpdateFile>
        </el-dialog>
    </div>

</template>

<script>
import { getNodeTree } from "@/api/myspace/scenario-edit-tool/scenario-edit";
import Tree from "@/components/LeftTree/tree.vue";
import AddDialog from "./add-dialog.vue";
import AddOrUpdateFile from "./add-or-update-file.vue";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

export default {
    name: "NodeConfigDialog",
    data() {
        return {
            dialogVisible: false,
            treeData: [],
            selectedNodeId: null,
            searchText: '',
            isFilterOpen: false,
            filters: {
                status: "",
                tags: "",
                owner: "",
                creator: "",
                lastModifier: "",
                matchType: "include",
            },
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            multipleSelection: []

        };
    },
    props: {
        scenarioId: {
            type: Number,
            default: 0,
        },
    },
    components: {
        Tree,
        AddDialog,
        AddOrUpdateFile
    },
    computed: {
        ...mapState({
            right_menuList: (state) => state.scenarioEditTool.right_menuList,
        }),
        filterNum() {
            return Object.values(this.filters).filter((item) => item).length - 1;
        },
        filteredTableData() {
            console.log(this.searchText);
            if (!this.searchText) return this.tableData
            const search = this.searchText.toLowerCase()
            return this.tableData.filter(item =>
                item.name.toLowerCase().includes(search) ||
                item.address.toLowerCase().includes(search)
            )
        }
    },
    created() {

    },
    watch: {
        dialogVisible(newValue) {
            if (!newValue) return;
            this.$nextTick(() => {
                this.getNodeTree();
            });
        }
    },
    methods: {
        // 获取节点树数据
        getNodeTree(newNodeId) {
            getNodeTree().then((response) => {
                if (response.code != 200) return;
                this.treeData = response.data[0].commonTreeList;
                
                const targetId = newNodeId || this.selectedNodeId;
                const targetNode = targetId
                    ? this.recurNodeForTarget(this.treeData, targetId)
                    : this.treeData[0];

                this.nodeClick(targetNode);
            });
        },

        // 点击节点
        nodeClick(node) {
            this.selectedNodeId = node.id;
            this.getNodeEntityData(node);
        },
        // 获取节点下的实体数据
        getNodeEntityData(node) {
            getNodeEntityData({ scenarioId: this.scenarioId, nodeId: node.id }).then(res => {
                this.tableData = res.data;
            });
        },
        // 移动树节点的顺序
        moveNodeOrder(draggingNode, dropNode, dropType) {
            // globalDataMoveTreeNode({
            //     movedNodeId: draggingNode.data.id, // 被移动节点的id
            //     referenceNodeId: dropNode.data.id, // 参照节点的id
            //     position: dropType == "after" ? 1 : dropType == "before" ? -1 : 0, // 相对位置，before:-1,into:0,after:1
            //     ancestors: draggingNode.data.data.ancestors, // 祖先
            //     folderChildrenOrder: {
            //         parentId:
            //             dropType == "inner" ? dropNode.data.id : dropNode.data.parentId, // 父级id
            //         siblingIds:
            //             dropType == "inner"
            //                 ? Array.from(dropNode.childNodes).map((item) => item.data.id)
            //                 : Array.from(dropNode.parent.childNodes).map(
            //                     (item) => item.data.id
            //                 ),
            //     },
            // }).then((response) => {
            //     if (response.code == 200) {
            //         this.$message.success(
            //             this.$toolHandle.getI18nName(
            //                 this.$zh.setup.responseText,
            //                 this.$en.setup.responseText,
            //                 this.$i18n.locale,
            //                 "success"
            //             )
            //         );
            //         this.getSelfGlobalDataTree();
            //     }
            // });
        },

        // 菜单点击
        handleMenuClick(menu, node) {
            switch (menu.name) {
                case "添加子节点":
                    this.handleAddOrUpdateFile("add", node);
                    break;
                case "编辑":
                    this.handleAddOrUpdateFile("edit", node);
                    break;
                case "删除":
                    this.handleDeleteFile(node);
                    break;
            }
        },

        // 添加或编辑子节点
        handleAddOrUpdateFile(sign, node) {
            this.$refs.addOrUpdateFileRef.init(
                sign,
                node,
            );
        },

        // 删除子节点
        handleDeleteFile(node) {
            this.$confirm(
                `确定删除${node.type == 0 ? "目录" : "节点"}  ${node.data.modelName
                } ?`,
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    customClass: "message-box-style",
                    type: "warning",
                }
            )
                .then(() => {
                    deleModel(node.id).then((response) => {
                        if (response.code == 200) {
                            this.$message.success(
                                this.$toolHandle.getI18nName(
                                    this.$zh.setup.responseText,
                                    this.$en.setup.responseText,
                                    this.$i18n.locale,
                                    "success"
                                )
                            );
                            this.$emit("nodeDelete", node);
                        }
                    });
                })
                .catch(() => { });
        },


        handleClose(done) {
            this.dialogVisible = false;
        },

        // 表格选中状态改变
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        // 表格添加实体
        handleAdd() {
            this.$refs.addDialogRef.dialogVisible = true;
        },

        // 表格删除实体
        handleDelete() {

        }
    },
};
</script>

<style lang="scss" scoped>
.node-config-dialog {
    .node-config {
        width: 1630px;
        height: 700px;

        .node-config-left-tree {
            height: 100%;
            display: flex;
            flex-direction: column;
            border-right: 1px solid var(--ui-border-color-split);
            box-sizing: border-box;
            width: 250px;
            padding-right: 10px;

            .node-config-tree-title {
                height: 35px;
                font-weight: var(--ui-font-weight-semibold);
                letter-spacing: 2px;
            }

            .node-config-tree-box {
                flex-grow: 1;
                overflow-y: auto;
            }
        }

        .node-config-right-box {
            width: calc(100% - 280px);
            padding: 0 50px;
            display: flex;
            flex-direction: column;

            .node-config-right-box__title {
                font-size: var(--ui-font-size-title);
                font-weight: var(--ui-font-weight-semibold)
            }

            .node-config-right-box__member {
                margin-top: 10px;
            }

            .node-config-right-box__split {
                margin-top: 30px;
                border-top: 1px solid var(--ui-border-color-split);
            }

            .node-config-right-box__query_add {
                margin-top: 30px;
                padding-bottom: 15px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid var(--ui-border-color-split);

            }

            .node-config-right-box__table {
                flex: 1;
                overflow: auto;

                ::v-deep .el-table__row {
                    height: 42px;
                }


            }
        }
    }
}
</style>